<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>网页聊天室</title>
    <style type="text/css">
        .chatdiv{width: 800px;height: 300px;padding: 10px;margin: 10px;border: #444 solid 1px;}
        .myshuo{text-align: right;border-bottom: #ccc solid 1px;padding: 5px 0;color: green;width: 100%}
        .othershuo{text-align: left;border-bottom: #ccc solid 1px;padding: 5px 0;color: dodgerblue;width: 100%}
        .xitongshuo{text-align: center;border-bottom: #ccc solid 1px;padding: 5px 0;color: red;font-weight: bold;width: 100%}
    </style>
</head>
<body>

<div id="loginpage" style="display: block">
    <h3>用户登陆</h3>
    输入用户名：<input type="text" id="username"><input type="button" onclick="login()" value="登陆">
</div>

<div id="chatpage" style="display: none">
    <div class="chatdiv" id="chatdiv"></div>
    <div>
        <select id="to" multiple="multiple" size="5">
        </select>
        <input type="button" onclick="getOnlineUser()" value="刷新当前在线用户">
        <input type="text" id="text"><input type="button" onclick="sendMessage()" value="发送">
    </div>
</div>


<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    var socket;
    var myusername="";

    function getOnlineUser(){
        $.get("/getOnlineUser",{},function(result){
            $("#to").empty();
            $("#to").append($("<option>").val("").text("全部"));
            console.log(result);
            for(var i=0;i<result.length;i++){
                $("#to").append($("<option>").val(result[i]).text(result[i]));
            }

        },'json');
    }

    function sendMessage(){
        var text=$("#text").val();
        if(text==''){
            alert('消息内容不能为空');
            return;
        }
        console.log($("#to :selected").val());
        var to=$("#to :selected").val();
        if(to!=''){
            $("#chatdiv").append("<div class='myshuo'>我说:"+text+"</div>");
        }
        $.get("/chat/send",{from:myusername,to:to,message:text},function(result){
            console.info(result);
            $("#text").val("");
        },'json');
    }

    function login(){
        var username=$("#username").val();
        if(username==''){
            alert('用户不能为空');
            return;
        }
        myusername=username;

        if (typeof (WebSocket) == "undefined") {
            console.log("遗憾：您的浏览器不支持WebSocket");
        } else {
            console.log("恭喜：您的浏览器支持WebSocket");
            //实现化WebSocket对象
            //指定要连接的服务器地址与端口建立连接
            //注意ws、wss使用不同的端口。我使用自签名的证书测试，无法使用wss，浏览器打开WebSocket时报错
            //ws对应http、wss对应https。
            socket = new WebSocket("ws://localhost:8080/ws/chat?username="+username);
            //连接打开事件
            socket.onopen = function() {
                console.log("Socket 已打开");
                //socket.send("消息发送测试(From Client)");
                $("#loginpage").hide();
                $("#chatpage").show();
                getOnlineUser();
            };
            //收到消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
                var message=JSON.parse(msg.data);
                if(message.to==''){
                    $("#chatdiv").append("<div class='xitongshuo'>【管理员】"+message.from+"说:"+message.message+"</div>");
                }else{
                    $("#chatdiv").append("<div class='othershuo'>"+message.from+"说:"+message.message+"</div>");
                }

            };
            //连接关闭事件
            socket.onclose = function() {
                console.log("Socket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                alert("Socket发生了错误");
            }
            //窗口关闭时，关闭连接
            window.unload=function() {
                socket.close();
            };
        }
    }

</script>
</body>
</html>
